import React from 'react';
import {
    Button,
    Paper,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    ThemeProvider
} from "@mui/material";
import PubSub from 'pubsub-js'
import PlayArrowOutlinedIcon from '@mui/icons-material/PlayArrowOutlined';
import '../PlayList/PlayList.css'
import {createTheme} from "@mui/material/styles";

const theme = createTheme({
    palette: {
        myred: {
            main: '#ff0202',
            contrastText: 'white',
            light: '#ff0202'
        },
    },
});
export default function MyTable(props) {

    let {rows,listID} = props;


    function toPlay(row){
        return () => {

            //console.log("play：" + (row.id) + ":" + props.from)
            PubSub.publish("playMusic",{...row})
        }

    }

    function toAdd(row){
        return () => {
            //console.log("add:" + row.id + ":" + props.from)
            PubSub.publish("addNowMusic",{...row})
        }

    }
    function del(row){
        return () => {

            PubSub.publish("delOneSong",{...row,listID:listID})
        }

    }
    return (

        <TableContainer component={Paper} className='table'>
            <Table  size='small' className='table' aria-label="simple table">
                <TableHead>
                    <TableRow>
                        <TableCell width='36%'>歌曲</TableCell>
                        <TableCell width='20%'>歌手</TableCell>
                        <TableCell width='36%'>专辑</TableCell>
                        <TableCell width='8%'>时长</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row) => (
                        <TableRow
                            key={row.id}
                            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                            className='album-cell'
                        >
                            <TableCell component="th" scope="row">
                                {row.name}
                            </TableCell>
                            <TableCell>{row.singer}</TableCell>
                            <TableCell>
                                <span className='album'>{row.album}</span>
                                <ThemeProvider theme={theme}>
                                    <Button className='playBtn' variant="contained" color='myred' onClick={toPlay(row)}><PlayArrowOutlinedIcon/>播放</Button>
                                    <Button  className='addBtn' variant="outlined" color='myred' onClick={toAdd(row)}>添加</Button>
                                    <Button sx={{marginLeft:10}} className='addBtn' variant="outlined" color='myred' onClick={del(row)}>删除</Button>
                                </ThemeProvider>
                            </TableCell>
                            <TableCell>{row.times}</TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>

    )
}